import { Button, Table, Popconfirm, Popover } from 'antd'

import type { ColumnsType } from 'antd/es/table'
import { useContext, useMemo } from 'react'
import { useNavigate } from 'react-router-dom'
import { useRecoilValue } from 'recoil'
import { TableInfo } from '../../data'
import styles from './index.module.less'
import IconSvg from '@/components/IconSvg'

import { reportDetailsContext } from '../../_context'
import { dictValues } from '@/store/dicts'

export default () => {
  const dictValuesList = useRecoilValue(dictValues)
  const navigte = useNavigate()
  const { tableList, state, selectedRowKeys, loading, onSelectChange, seleteTask, goBack } =
    useContext(reportDetailsContext)
  // 样式
  const computedColor = (status: string) => {
    switch (status) {
      case '1':
        return {
          backgroundColor: '#EEFFFB',
          color: '#51BCA5',
        }
      case '2':
        return {
          backgroundColor: '#FFF1F2',
          color: '#EB5F62',
        }
      case '0':
        return {
          backgroundColor: '#F2F2F2',
          color: '#8E8E8E',
        }
      default:
        break
    }
  }

  const creatReason = (item: string) => (
    <div style={{ whiteSpace: 'pre-wrap' }} className={styles.reason}>
      {item}
    </div>
  )

  const columns: ColumnsType<TableInfo> = useMemo(
    () => [
      {
        title: '季度',
        align: 'center',
        render: (_, record) => `${seleteTask[0]}年第${seleteTask[1]}季度`,
      },
      {
        title: '医院名称',
        dataIndex: 'hospitalName',
        align: 'center',
      },
      {
        title: '状态',
        // dataIndex: 'reportStatus',
        align: 'center',
        render: (_, value) => (
          <>
            {value.reportStatus === '2' ? (
              <>
                <Popover content={creatReason(value.returnReason!)} title='退回原因'>
                  <div className={styles.tag} style={computedColor(value.reportStatus!)}>
                    {dictValuesList.report_status.find((item) => item.value === value.reportStatus)?.label}
                  </div>
                </Popover>
              </>
            ) : (
              <>
                <div className={styles.tag} style={computedColor(value.reportStatus)}>
                  {dictValuesList.report_status.find((item) => item.value === value.reportStatus)?.label}
                </div>
              </>
            )}
          </>
        ),
      },
      {
        title: '操作',
        align: 'center',
        render: (_, record) => (
          <div className={styles.btns}>
            {record.reportStatus !== '0' && (
              <Button
                onClick={() => navigte('/data-review/check', { state: { ...record, task: state.task } })}
                type='link'
                icon={<IconSvg name='look' />}
              >
                查看
              </Button>
            )}

            {record.reportStatus === '1' && (
              <Button type='link' onClick={() => goBack(record)} icon={<IconSvg name='goback' />} danger>
                退回
              </Button>
            )}
          </div>
        ),
      },
    ],
    [seleteTask],
  )

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  }

  return (
    <Table
      loading={loading}
      style={{ marginTop: '24px' }}
      pagination={false}
      rowSelection={rowSelection}
      columns={columns}
      dataSource={tableList}
      rowKey={'hospitalId'}
    />
  )
}
